<template>
    <!-- 三列 -->
    <view class="three-mode-wrapper u-flex u-flex-wrap u-col-top">
        <view class="three-mode-items" v-for="(item, i) in list" :key="$u.guid(4)" :style="{ width: widthOf3c, marginRight, marginBottom }">
            <column-item :data="item" :config="config"></column-item>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { inject, computed } from 'vue'
import ColumnItem from '../column.vue'
interface Props {
    list: Array<any>
    config: any
}

withDefaults(defineProps<Props>(), {
    list: () => [],
    config: () => ({})
})

const data = inject<any>('data')

let marginBottom = computed(() => {
    return (data.style.marginBottom || 0) + 'px'
})

let marginRight = computed(() => {
    return (data.style.marginRight || 0) + 'px'
})

let widthOf3c = computed(() => {
    return `calc((100vw - 2 * ${marginRight})/3)`
})

const $u = computed(() => {
    return uni.$u
})
</script>

<style lang="scss" scoped>
// 三列
.three-mode-wrapper{
    width: 100vw;
    align-items: stretch;
    .three-mode-items{
        flex: 1;
    }
}
.three-mode-items:nth-child(3n) {
    margin-right: 0 !important;
}
</style>
